<template>
    <view class="container">
        <view class="u-demo-block">
            <u-swipe-action>
                <u-swipe-action-item v-for="(cart,index) in cartDto"
                        :options="options1" @click="cartDelete(cart,index)"
                >
                    <view class="swipe-action u-border-top u-border-bottom">
                        <view class="swipe-action__content">
                                <view>
                                    <img :src="cart.picUrl" style="width: 100px">
                                </view>
                                <view>
                                    <p>{{cart.spuName}}</p>
                                    <p style="color: #B2B2B2;font-size: 9px">{{cart.skuName}}</p>
                                </view>
                                <view>
                                    <span>{{cart.price}}</span>
                                    <span class="s1"><u-icon name="minus" style="display: inline-block" @click="minus(index)"/></span>
                                    <input :value="cart.amount" style="display: inline-block;width: 10px;vertical-align: middle;background: #8cc5ff" disabled>
                                    <span class="s1"><u-icon name="plus" style="display: inline-block" @click="plus(index)"/></span>
                                </view>
                        </view>
                    </view>
                </u-swipe-action-item>
            </u-swipe-action>

            <button @click="goOrder">确认支付{{totalPrice}}</button>
        </view>
        <!--底部导航杠-->
        <u-tabbar
                class="footbar"
                :value="value1"
                :fixed="false"
                :placeholder="false"
                :safeAreaInsetBottom="false"
        >
            <u-tabbar-item text="首页" icon="home"  @click="barToPage('/')" ></u-tabbar-item>
            <u-tabbar-item text="分类" icon="list" @click="barToPage('/pages/sjh/goodsSort')" ></u-tabbar-item>
            <u-tabbar-item text="购物车" icon="shopping-cart" @click="barToPage('/pages/sjh/shoppingCart')" ></u-tabbar-item>
            <u-tabbar-item text="我的" icon="account" @click="barToPage('/pages/sjh/own')" ></u-tabbar-item>
        </u-tabbar>
    </view>
</template>
<script>
    import Request from '../../utils/request'
    export default {
        data() {
            return{
                totalPrice:'',
                options1: [{
                    text: '删除'
                }],
                value1:2,
                value2:0,
                userId:1,
                cartDto:[
                    // {
                    //     id:1,
                    //     skuName:'',
                    //     spuName:'',
                    //     price:'',
                    //     amount:'',
                    //     picUrl:''
                    // }
                ]
            }
        },
        created(){
            this.seeCart()
        },
        methods:{
            /*底部导航跳转页面*/
            barToPage(url,val){
                console.log(url)
                uni.navigateTo({
                    url: url
                });
            },
            /*更改数量，步进器*/
             numberBox(cart,index){
                Request.request('management-mall/leyou.order/order-shopping-cart/changeAmount'
                    ,{cartId:cart.id,amount:cart.amount,userId:this.userId},'post').then(res=>{
                    console.log(res)
                    // console.log(res.data.specsList)
                    if(res.success){
                        this.totalPrice=res.data.totalPrice
                        if(cart.amount==0){
                            this.cartDto.splice(index, 1)
                        }
                    }else{

                    }
                    //this.mallSpecsShow=res.data.specsList
                }).catch(error=>{
                    console.error(error)
                })

            },
            /*获取购物车列表*/
            seeCart(){
                Request.request('management-mall/leyou.order/order-shopping-cart/seeCart'
                    ,{userId:this.userId},'post').then(res=>{
                    console.log(res)
                    // console.log(res.data.specsList)
                    this.cartDto=res.data.list
                    //alert(JSON.stringify(this.cartDto))
                    for(let i=0;i<this.cartDto.length;i++){
                        this.cartDto[i].box=false
                        //alert(JSON.stringify(this.cartDto[i]))
                    }
                    this.totalPrice=res.data.totalPrice
                    //this.mallSpecsShow=res.data.specsList
                }).catch(error=>{
                    console.error(error)
                })
            },
            /*删除购物车内商品*/
            cartDelete(cart,index){
                cart.amount=0
              //alert(cart.id)
                Request.request('management-mall/leyou.order/order-shopping-cart/changeAmount'
                    ,{cartId:cart.id,amount:cart.amount,userId:this.userId},'post').then(res=>{
                    console.log(res)
                    // console.log(res.data.specsList)
                    if(res.success){
                        this.totalPrice=res.data.totalPrice
                        this.cartDto.splice(index, 1)
                    }else{

                    }
                    //this.mallSpecsShow=res.data.specsList
                }).catch(error=>{
                    console.error(error)
                })
            },
            /*跳转到下单*/
            goOrder(){
                uni.setStorageSync("Iscart",true)
                uni.navigateTo({
                    url: '/pages/sjh/writeOrder'
                });
            },
            minus(index){
                this.cartDto[index].amount--
                this.numberBox(this.cartDto[index],index)
            },
            plus(index){
                this.cartDto[index].amount++
                this.numberBox(this.cartDto[index],index)
            },
        }
    }
</script>

<style>
    .container {
        padding-bottom: 60px;
        font-size: 14px;
        line-height: 24px;
    }
    .footbar{
        margin: 0;
        width: 360px;
        position: fixed;
        bottom: 0;
    }
    .but1{
        width: 10px;
        height:20px;
        display: inline-block;
    }
    .s1{
        background: #a5a5a5;
        padding: 5px;
        border-radius: 10px;
        margin: 1px 3px;
    }
    .swipe-action__content>view{
        margin-left: 10px;
    }
</style>
